<template>
    <div class="action-wrapper" v-if="showOpList.length > 0">
        <template v-for="(op, index) in showOpList">
            <Poptip
                v-if="getTooltip(op)"
                :key="index"
                confirm
                ok-text="确定"
                cancel-text="取消"
                size="large"
                :title="getTitle(op)"
                transfer
                word-wrap
                width="200"
                :disabled="getDisStatus(op)"
                @on-ok="handleClick('',op)"
            >
                <Button type="text" size="small" class="op-btn" :disabled="getDisStatus(op)"  :title="op.title">
                    <img :src="getImg(op)">
                </Button>
            </Poptip>
            <Button v-else type="text" size="small" class="op-btn" :disabled="getDisStatus(op)" @click="(e) => handleClick(e,op)" :title="op.title">
                <img :src="getImg(op)">
            </Button>
        </template>
    </div>
</template>
<script>
export default {
    name: 'Action',
    props: {
        column: {
            type: Object,
            default: () => {
                opList:[]
            }
        },
        row: {
            type: Object,
            default: () => {}
        },
        index: Number
    },
    data(){
        return {
            opImages:{}
        }
    },
    computed: {
        showOpList() {
            let opList = this.column.opList ? this.column.opList.filter((op) => !op.show || op.show(this.row)) : [];
            // 内置
            // opList.forEach(op => {
            //     if(!this.opImages[op.type]){
            //         // this.opImages[op.type] = {
            //         //     disabled : require(`./image/${op.type}-d.png`),
            //         //     default : require(`./image/${op.type}-h.png`)
            //         // }
            //     }
            //     if(op.type === 'modify' && !op.img){
            //         op.txt="修改"
            //         // op.img = {
            //         //     disabled:require('./image/modify-d.png'),
            //         //     default:require('./image/modify-h.png')
            //         // }
            //     }else if(op.type === 'delete' && !op.img){
            //         op.txt="删除"
            //         op.tooltip = true
            //         op.tip="确定要删除吗?"
            //         // op.img = {
            //         //     disabled:require('./image/delete-d.png'),
            //         //     default:require('./image/delete-h.png')
            //         // }
            //     }else if(op.type === 'download' && !op.img){
            //         op.txt="下载"
            //         // op.img = {
            //         //     disabled:require('./image/download-d.png'),
            //         //     default:require('./image/download-h.png')
            //         // }
            //     }else if(!op.img && op.type){
            //         // op.img = {
            //         //     disabled:require(`./image/${op.type}-d.png`),
            //         //     default:require(`./image/${op.type}-h.png`)
            //         // }
            //     }else{
            //         // op.img = {
            //         //     disabled:'',
            //         //     default:''
            //         // }
            //     }
            // })
            return opList
        }
    },
    methods: {
        getDisStatus(op) {
            if (op.disabled && typeof op.disabled === 'function') {
                return op.disabled(this.row);
            } else {
                return op.disabled
            }
        },
        getTxt(op) {
            if (typeof op.txt === 'function') {
                return op.txt(this.row);
            } else {
                return op.txt;
            }
        },
        getTitle(op){
            if (typeof op.title === 'function') {
                return op.title(this.row);
            } else {
                return op.title;
            }
        },
        getTooltip(op) {
            if (typeof op.tooltip === 'function') {
                return op.tooltip(this.row);
            } else {
                return op.tooltip;
            }
        },
        getImg(op){
            let {img,type} = op;
            if(img){
                return this.getDisStatus(op)  ? img.disabled : img.default
            }else if(type){
                return this.getDisStatus(op) ?  require(`./image/${op.type}-d.png`) : require(`./image/${op.type}-h.png`)
            }
        },
        handleClick(e, op, name) {
            if (!this.getDisStatus(op)) {
                op.fun ? op.fun(this.row,e) : op.on.click(this.row,e, name);
            }
        }
    }
};
</script>
<style scoped>
.action-wrapper {
    /* --main-color: #515a6e; */
    /* --operation-unuseable: #999; */
    /* --operation-useable: #1563C2; */
    /* --operation-del: #db4747; */
    /* --select-content-bgcolor: #fff; */
}
.op-btn,.op-btn:hover,.op-btn:focus{
    border: none;
    background: none;
    box-shadow: none;
}
.action-wrapper button:focus{
    box-shadow: none;
}
.pointer {
    cursor: pointer;
    color: var(--operation-useable);
    /* #307ced; */
}
.not-allowed {
    cursor: not-allowed;
    color: var(--operation-unuseable);
}
</style>
